{include file="public/header" /}
<link rel="stylesheet" href="/static/admin/addons/builder/css/base.css" media="all">
<style>
    .tab_color {
        width: 114px;
        height: 45px;
        border: 1px solid #e5e5e5;
        margin-bottom: 10px;
        margin-right: 20px;
        border-radius: 5px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        cursor: pointer;
    }

    .flex {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .acea-row {
        display: flex;
        align-items: center;
        padding-bottom: 10px;
    }

    .color_cont {
        font-size: 14px;
    }


    .mr-2 {
        margin-right: 10px;
    }

    .main_c {
        width: 25px;
        height: 25px;
        border-radius: 5px;
        text-align: center;
        line-height: 25px;
        font-size: 14px;
    }

    .active {
        border: 1px solid #3B91FF;
        transition: all .3s;
    }

    .tab_color_text {
        line-height: 24px;
    }

    .acea-row .layui-icon {
        color: #fff;
    }

    .hide {
        display: none;
    }

    .show_img {
        width: 800px;
        height: 100%;
    }

    .show_img img {
        width: 100%;
        height: 100%;
    }

    .save-btn {
        position: absolute;
        right: 15px;
        top: 15px;
    }
    .tips{
        padding-top: 15px;
    }
    .tips p{
        font-size: 12px;
        color: #515a6e;
    }
</style>
<body>
<div class="layui-fluid layui-anim layui-leftbit">
    <div class="layui-card back-title">
        <div class="layui-card-body back-after">
            <div class="after-line">
                <i class="layui-icon layui-icon-more-vertical"></i>
                <span style="margin: 0 0 0 5px">主题风格</span>
            </div>
            <span class="middle"></span>
            <span class="right">H5手机端</span>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-body" style="padding: 15px;">
            <div class="acea-row">
                {foreach name="addons" item="vo"}
                <div class="tab_color {if $vo.key == $installed}active{/if}" data-icon="{$vo.icon}"
                     data-key="{$vo.key}"
                     data-id="{$vo.id}">
                    <div class="color_cont flex align-center">
                        <div class="main_c mr-2" style="background-color: {$vo.css}">
                            <i class="layui-icon layui-icon-success {if $vo.key != $installed}hide{/if}"></i>
                        </div>
                        <div class="tab_color_text">{$vo.title}</div>
                    </div>
                </div>
                {/foreach}

            </div>
            <div class="show_img">
                <img src=""/>
            </div>
            <div class="save-btn">
                <button type="button" class="save-btn-pop layui-btn layui-bg-purple layui-btn-sm install">切换</button>
            </div>
            <div class="tips">
                <p>注意：<br/>1.切换主题会直接覆盖index/view层，以及相关静态资源，如有改动原始代码，请勿切换主题！
                    <br/>2.切换后请Ctrl+F5清除缓存来更新主题</p>
            </div>
        </div>
    </div>

</div>

</body>
{include file="public/footer" /}
<script>
    $(function () {
        var a = $, tc = a('.tab_color'), active = a('.active'), installed = '{$installed}', ly = layui.layer;
        a('.show_img img').attr('src', active.attr('data-icon'))
        a('.active').attr('data-key') === installed ?
            a('.save-btn-pop').addClass('layui-btn-disabled').text('当前主题').attr('disabled', true) :
            a('.save-btn-pop').removeClass('layui-btn-disabled').text('切换').attr('disabled', false);

        tc.click(function () {
            a('.show_img img').attr('src', a(this).attr('data-icon'))
            a(this).addClass('active').siblings().removeClass('active');
            a('.tab_color .layui-icon').hide();
            a(this).find('.layui-icon').show();
            a(this).attr('data-key') === installed ?
                a('.save-btn-pop').addClass('layui-btn-disabled').text('当前主题').attr('disabled', true) :
                a('.save-btn-pop').removeClass('layui-btn-disabled').text('切换').attr('disabled', false);
        });

        a('.install').click(function () {
            const id = a('.active').attr('data-id');
            ly.confirm('<a style="color: red">将覆盖index/view层，若有变动请勿切换！</a><br/>确定要切换吗？', {title: '请确认'}, function (index) {
                ly.close(index);
                layerLoad('下载中，请稍等...')
                a.post('{:url("theme/cover")}', {id: id}, function (data) {
                    ly.closeAll();
                    ly.msg(data.msg, {time: 1000}, function () {
                        location.reload()
                    });

                });
            });
        });

    });

</script>
</html>